<template>
	<div>
		<div>
			<van-nav-bar title="数据分析" />
		</div>
		<div ref="chart" style="width: 100%; height: 400px;">

		</div>
		<div></div>
		<div ref="chart2" style="width: 100%; height: 400px;">
			
		</div>
		<div>
			<van-tabbar v-model="active" route>
				<van-tabbar-item to='/community'>
					<span>社区</span>
					<template slot="icon">
						<img src="@/assets/tabbar/community.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/analysis'>
					<span>数据分析</span>
					<template slot="icon">
						<img src="@/assets/tabbar/analysis.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/home'>
					<template slot="icon">
						<img src="@/assets/tabbar/home.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/service'>
					<span>服务</span>
					<template slot="icon">
						<img src="@/assets/tabbar/service.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/mine'>
					<span>我的</span>
					<template slot="icon">
						<img src="@/assets/tabbar/mine.png">
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: 'analysis',
		data() {
			return {
				active: '/analysis'
			}
		},
		mounted() {
			this.getCharData()
		},
		methods: {
			getCharData() {
				const chart = this.$refs.chart;
				const chart2 = this.$refs.chart2;
				const myChart = echarts.init(chart);
				const myChart2 = echarts.init(chart2);
				const option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						]
					}]
				};
				
				
				const option2 = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};
				// 设置图表选项
				myChart.setOption(option);
				myChart2.setOption(option2)
			}
		}
	}
</script>

<style>
</style>
